<template>
  <Dialog v-model="dialogVisible" :title="'池子详情: ' + poolInfo.name" width="1200px">
    <el-descriptions title="基本信息" :column="3" border>
      <el-descriptions-item label="池子名称">{{ poolInfo.name }}</el-descriptions-item>
      <el-descriptions-item label="群总数">{{ poolInfo.totalCount }}</el-descriptions-item>
      <el-descriptions-item label="未使用">{{ poolInfo.unusedCount }}</el-descriptions-item>
      <el-descriptions-item label="使用中">{{ poolInfo.usingCount }}</el-descriptions-item>
      <el-descriptions-item label="已使用">{{ poolInfo.usedCount }}</el-descriptions-item>
      <el-descriptions-item label="不存在">{{ poolInfo.notExistCount }}</el-descriptions-item>
      <el-descriptions-item label="描述" :span="3">{{ poolInfo.description || '-' }}</el-descriptions-item>
    </el-descriptions>

    <div class="my-4 flex justify-between items-center">
      <div class="text-lg font-bold">群号列表</div>
      <div>
        <el-input v-model="queryParams.groupNumber" placeholder="请输入群号" clearable class="!w-180px mr-2">
          <template #prefix>
            <Icon icon="ep:message" />
          </template>
        </el-input>
        <el-input v-model="queryParams.groupName" placeholder="请输入群名" clearable class="!w-180px mr-2">
          <template #prefix>
            <Icon icon="ep:user-filled" />
          </template>
        </el-input>
        <el-select v-model="queryParams.status" placeholder="状态筛选" clearable class="!w-120px mr-2">
          <el-option v-for="dict in getIntDictOptions(DICT_TYPE.YK_QQ_GROUP_POOL_STATE)" :key="dict.value"
            :label="dict.label" :value="dict.value" />
        </el-select>
        <el-button type="primary" @click="handleSearch">
          <Icon icon="ep:search" class="mr-5px" /> 查询
        </el-button>
        <el-button @click="resetSearch">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
      </div>
    </div>

    <el-table v-loading="loading" :data="groupList" border style="width: 100%" height="500">
      <el-table-column type="index" label="序号" width="78" align="left">
        <template #default="scope">
          {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="groupNumber" label="群号" width="120" align="left" />
      <el-table-column prop="groupName" label="群名称" align="left" min-width="120" />
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.YK_QQ_GROUP_POOL_STATE" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column prop="taskCount" label="使用次数" width="100" align="center" />
      <el-table-column prop="successCount" label="成功次数" width="100" align="center" />
      <el-table-column prop="failureCount" label="失败次数" width="100" align="center" />
      <el-table-column prop="lastUseTime" label="最后使用时间" width="180" :formatter="dateFormatter" align="center" />
      <el-table-column prop="qqAccount" label="使用QQ" width="120" align="center" />
      <el-table-column prop="remark" label="备注" align="left" min-width="120" />
    </el-table>

    <!-- 分页 -->


    <template #footer>
      <div class="flex justify-end">
        <!-- <el-button @click="dialogVisible = false">关闭</el-button> -->
        <Pagination class="mt-4" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
          @pagination="getGroupList" />
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { GroupPoolApi, GroupPool, GroupPoolGroup } from '@/api/yunkong/grouppool'
import { dateFormatter } from '@/utils/formatTime'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'

defineOptions({ name: 'GroupPoolDetail' })

const dialogVisible = ref(false)
const loading = ref(false)
const poolInfo = ref<GroupPool>({} as GroupPool)
const groupList = ref<GroupPoolGroup[]>([])
const total = ref(0)
const message = useMessage() // 消息弹窗

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  groupNumber: undefined as string | undefined,
  groupName: undefined as string | undefined,
  status: undefined as number | undefined
})

// 搜索处理
const handleSearch = () => {
  queryParams.pageNo = 1
  getGroupList()
}

// 重置搜索
const resetSearch = () => {
  queryParams.groupNumber = undefined
  queryParams.groupName = undefined
  queryParams.status = undefined
  queryParams.pageNo = 1
  getGroupList()
}

// 获取群号列表
const getGroupList = async () => {
  if (!poolInfo.value.id) return

  loading.value = true
  try {
    const res = await GroupPoolApi.getGroupPoolGroupPageByPoolId(poolInfo.value.id, queryParams)
    groupList.value = res.list || []
    total.value = res.total
  } catch (error) {
    console.error('获取群号列表失败', error)
    message.error('获取群号列表失败')
  } finally {
    loading.value = false
  }
}

// 加载群号池子详情
const loadPoolDetail = async (id: number) => {
  loading.value = true

  try {
    // 获取池子基本信息
    const poolData = await GroupPoolApi.getGroupPool(id)
    poolInfo.value = poolData

    // 获取群号列表(分页)
    await getGroupList()
  } catch (error) {
    console.error('获取群号池子详情失败', error)
    message.error('获取群号池子详情失败')
  } finally {
    loading.value = false
  }
}

// 打开弹窗
const open = (id: number) => {
  dialogVisible.value = true
  // 重置搜索条件
  queryParams.pageNo = 1
  queryParams.pageSize = 10
  queryParams.groupNumber = undefined
  queryParams.groupName = undefined
  queryParams.status = undefined

  // 加载数据
  loadPoolDetail(id)
}

// 对外暴露方法
defineExpose({
  open
})
</script>